function createImagesPreviewer(selector, items) {
    var docFragment = document.createDocumentFragment();

    var myContainer = document.createElement('div');
    myContainer.style.width = '700px';
    myContainer.style.height = '500px';
    myContainer.style.top = '80px';
    myContainer.style.left = '330px';
    myContainer.style.position = 'absolute';

    var listContainer = document.createElement('div');
    listContainer.style.left = '500px';
    listContainer.style.width = "200px";
    listContainer.style.height = "500px";
    listContainer.style.position = 'relative';
    listContainer.style.overflow = 'auto';
    listContainer.style.display = 'inline-block';

    for (var i = 0; i < items.length; i++) {
        var imgContainer = document.createElement('div');
        imgContainer.className = 'img-container';
        imgContainer.addEventListener('mouseover', function () {
            this.style.backgroundColor = '#c9c9c9';
        });

        imgContainer.addEventListener('mouseout', function () {
            this.style.backgroundColor = 'white';
        });

        var titleContainer = document.createElement('p');
        titleContainer.innerText = items[i].title;
        titleContainer.style.fontWeight = 'bold';
        titleContainer.style.display = 'inline-block';
        titleContainer.style.height = '10px';
        titleContainer.style.paddingLeft = "70px";
        titleContainer.style.margin = '0px';
        titleContainer.style.position = 'relative';

        var imgEntry = document.createElement('img');
        imgEntry.src = items[i].url;
        imgEntry.style.width = '180px';
        imgEntry.style.height = 'auto';
        imgEntry.style.borderRadius = '5px';

        imgContainer.appendChild(titleContainer);
        imgContainer.appendChild(imgEntry);

        imgContainer.addEventListener('click', function () {

            var title = this.children[0].innerText;
            console.log(title);

            if (title === "Еagle") {
                title = 'eagle';
            }

            document.getElementById('bigTitle').innerText = title;
            document.getElementById('bigImg').src = 'images/' + title + '.jpg';
        });

        listContainer.appendChild(imgContainer);
    }

    var showPicContainer = document.createElement('div');
    showPicContainer.style.display = 'inline-block';
    showPicContainer.style.position = 'absolute';
    showPicContainer.style.width = '450px';
    showPicContainer.style.height = '450px';

    var titleContainer = document.createElement('p');
    titleContainer.innerText = items[0].title;
    titleContainer.style.fontWeight = 'bold';
    titleContainer.style.display = 'block';
    titleContainer.style.height = '80px';
    titleContainer.style.paddingLeft = "180px";
    titleContainer.style.paddingTop = "50px";
    titleContainer.style.margin = '0px';
    titleContainer.style.fontSize = '40px';
    titleContainer.id = 'bigTitle';

    titleContainer.style.position = 'relative';

    var imgEntry = document.createElement('img');
    imgEntry.src = items[0].url;
    imgEntry.style.width = '420px';
    imgEntry.style.height = 'auto';
    imgEntry.style.borderRadius = '15px';
    imgEntry.style.position = 'relative';
    imgEntry.id = 'bigImg';

    var allImgDivs = document.getElementsByClassName('img-container');

    //for (var j = 0; j < allImgDivs.length; j++) {
    //    allImgDivs[j].addEventListener('click', function () {
    //        console.log(this);
    //    })
    //}
    
    console.log(allImgDivs);

    showPicContainer.appendChild(titleContainer);
    showPicContainer.appendChild(imgEntry);

    myContainer.appendChild(showPicContainer);
    myContainer.appendChild(listContainer);

    docFragment.appendChild(myContainer);
    var container = document.querySelector(selector);
    container.appendChild(docFragment);
}